<template>
  <el-sub-menu :index="menu.name" :route="menu">
    <template #title>
      <el-icon>
        <component :is="menu.meta?.icon" />
      </el-icon>
      <span>{{ menu.name }}</span>
    </template>

    <template v-for="item in menu.children" :key="item.path">
      <template v-if="item.children?.length > 0">
        <SubMenu :menu="item"></SubMenu>
      </template>
      <el-menu-item v-else :index="item.name" :route="item">
        {{ item.name }}
      </el-menu-item>
    </template>
  </el-sub-menu>
</template>

<script lang="ts" setup>
const props = defineProps<{
  menu: Menu;
}>();
</script>

<style lang="scss" scoped></style>
